{% extends "movie/base.html" %}
{% block content %}
    <style>
    iframe{
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    z-index: -1;
    }
        .movie-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            margin-top: 20px;
        }
        .movie-item {
            width: 200px;
            margin-bottom: 30px;
            text-align: center;
        }
        .movie-item:hover {
            transform: translateY(-5px);
            transition: transform 0.3s ease;
        }
        .movie-poster {
            width: 100%;
            height: 320px;
            overflow: hidden;
            border-radius: 5px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .movie-title {
            margin-top: 10px;
            font-size: 16px;
            font-weight: bold;
            color: #ffffff;
        }
        .movie-score {
            display: block;
            margin-top: 5px;
            color: #ffffff;
            font-size: 20px;
        }
        .pagination {
            margin-top: 20px;
        }

           .carousel {
            position: relative;
            width: 100%;
            height: 500px; /* 根据图片大小调整 */
            overflow: hidden;
        }

        .carousel-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        .carousel-image.active {
            opacity: 1;
        }

    </style>

       <script>
        document.addEventListener('DOMContentLoaded', function() {
            const images = document.querySelectorAll('.carousel-image');
            let index = 0;

            setInterval(() => {
                images[index].classList.remove('active');
                index = (index + 1) % images.length;
                images[index].classList.add('active');
            }, 2000); // 3秒钟切换一次图片
        });
    </script>



      <div class="container" style="background-color: transparent; color: #fff; padding: 20px;">
            <div class="jumbotron" style="background-color: transparent;">
                <div id="image-carousel" class="carousel">
                    <img src="/static/movie/bj/1017.jpg" class="carousel-image">
                    <img src="/static/movie/bj/1018.jpg" class="carousel-image">
                    <img src="/static/movie/bj/1019.jpg" class="carousel-image">
                    <img src="/static/movie/bj/1020.jpg" class="carousel-image">
                    <img src="/static/movie/bj/1021.jpg" class="carousel-image">
                    <img src="/static/movie/bj/1022.jpg" class="carousel-image">
                    <img src="/static/movie/bj/1023.jpg" class="carousel-image">
                    <img src="/static/movie/bj/1024.jpg" class="carousel-image">
                    <img src="/static/movie/bj/1025.jpg" class="carousel-image">
                    <img src="/static/movie/bj/1026.jpg" class="carousel-image">
                    <img src="/static/movie/bj/1027.jpg" class="carousel-image">
                    <img src="/static/movie/bj/1028.jpg" class="carousel-image">
                    <img src="/static/movie/bj/1029.jpg" class="carousel-image">
                    <img src="/static/movie/bj/1030.jpg" class="carousel-image">
                    <img src="/static/movie/bj/1031.jpg" class="carousel-image">
                    <img src="/static/movie/bj/1032.jpg" class="carousel-image">
                </div>
            </div>
        </div>

    <div class="container">
        <div class="movie-grid">
            {% for movie in movies %}
                <a href="{% url 'movie:detail' movie.pk %}" class="movie-item">
                    <div class="movie-poster">
                        <img src="/static/movie/img/{{ movie.imdb_id }}.jpg" alt="{{ movie.name }} Poster">
                        
                    </div>                    <div class="movie-title">{{ movie.name }}</div>
                    <span class="movie-score">电影评分{{ movie.get_score }}</span>
                </a>
            {% endfor %}
        </div>
    </div>

    <nav style="text-align: center;">
        <ul class="pagination">
            {% if page_obj.has_previous %}
                <li><a href="{% url 'movie:index' %}?p={{ page_obj.previous_page_number }}">上一页</a></li>
            {% else %}
                <li class="disabled"><a href="javascript:void(0);">上一页</a></li>
            {% endif %}

            {% if left_has_more %}
                <li><a href="{% url 'movie:index' %}?p=1">1</a></li>
                <li><span>...</span></li>
            {% endif %}

            {% for left_page in left_pages %}
                <li><a href="{% url 'movie:index' %}?p={{ left_page }}">{{ left_page }}</a></li>
            {% endfor %}

            <li class="active"><span>{{ current_page }}</span></li>

            {% for right_page in right_pages %}
                <li><a href="{% url 'movie:index' %}?p={{ right_page }}">{{ right_page }}</a></li>
            {% endfor %}

            {% if right_has_more %}
                <li><span>...</span></li>
                <li><a href="{% url 'movie:index' %}?p={{ paginator.num_pages }}">{{ paginator.num_pages }}</a></li>
            {% endif %}

            {% if page_obj.has_next %}
                <li><a href="{% url 'movie:index' %}?p={{ page_obj.next_page_number }}">下一页</a></li>
            {% else %}
                <li class="disabled"><a href="javascript:void(0);">下一页</a></li>
            {% endif %}
        </ul>
    </nav>
{% endblock %}
